<div class="content office-page" id="page-body">
    <div class="icontentleft">
        <div class="contentleft-office">
            <h3><?php echo $franchise->name ?></h3>
            <div id="map_canvas" style="float:right; width:247px; height:160px; margin: 5px 10px 0px 0px;"></div>
            <script>
                var map;
                var lat;
                var lng;
                var mapOptions;
                var geocoder;
                var address;
                var myLatlng;

                geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': '<?php echo $franchise->location_addr_street1 . ' ' . $franchise->location_addr_suburb . ' ' . $franchise->location_addr_state . ' ' . $franchise->location_addr_pcode ?>'}, function(results, status) {
                    if (status==google.maps.GeocoderStatus.OK) {
                        //lng = results[0].geometry.location.lng();
                        //lat = results[0].geometry.location.lat();
                        //myLatlng = new google.maps.LatLng(lat,lng);
                        myLatlng = results[0].geometry.location;

                        mapOptions = {
                            center: myLatlng,
                            zoom: 15,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            title:address
                        });
                        marker.setMap(map);
                    }
                    else {
                        alert('Address not found');
                    }
                });
                        
                //Wait until the DOM is fully loaded
                $(document).ready(function() {
                    //Listen for the form submit
                    $('.showError').html('');
                });
                
                
            </script>
            <p>
                <?php echo $franchise->location_addr_street1 ?><br /> 
                <?php echo $franchise->location_addr_suburb . ' ' . $franchise->location_addr_state . ' ' . $franchise->location_addr_pcode ?>
            </p>
            <p>
                <strong>Phone:</strong> <?php echo $franchise->phone ?><br /> 
                <strong>Fax:</strong> <?php echo $franchise->fax ?>
            </p>
            <a href="#" onclick="$('#emailoffice-dialog-modal').dialog('open'); return false;" class="orange-block">Email office</a> 
            <a href="#" onclick="$('#marketappraisal-dialog-modal').dialog('open'); return false;" class="orange-block">Free Market Appraisal</a>
            <div class="quote">
                <?php echo $franchise->quote; ?>
            </div>
        </div>
    </div>
    <div class="contentright">
        <table>
            <tr>
                <td>
                    <h2 class="latest-listing"><a href="javascript:get_office('last_list','listings',0)">Latest Listings</a></h2> 
                </td>
            </tr>
            <tr>
                <td>
                    <div id="last_list" style="height:372px;overflow:hidden" rel="0"></div>
                </td>
            </tr>
            <tr>
                <td style="height:24px">
                    <a href="javascript:backrecord('last_list','listings')"><img src="<?php echo base_url(); ?>img/arrow-top.png" alt="" style="margin: 6px 0 0 53px;" /></a>
                    <a href="javascript:nextrecord('last_list','listings')"><img src="<?php echo base_url(); ?>img/arrow-bottom.png" alt="" style="margin-top: 6px" /></a>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('sold')" class="status active" id="sold">For Sale</a></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('rentals')" class="status" id="rentals">For Rent</a></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h2><a href="javascript:changeStatus('leased')" class="status" id="leased">Sold</a></h2> 
                </td>
            </tr>
            <tr>
                <td>
                    <div id="ofice_status" style="height:308px;overflow:hidden" rel="0" status="sold"></div>
                </td>
            </tr>
            <tr>
                <td style="height:24px">
                    <a href="javascript:backoffice()"><img src="<?php echo base_url(); ?>img/arrow-top.png" alt="" style="margin: 6px 0 0 53px;" /></a>
                    <a href="javascript:nextoffice()"><img src="<?php echo base_url(); ?>img/arrow-bottom.png" alt="" style="margin-top: 6px" /></a>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <h2><?php echo anchor('offices/team/' . $franchise->id, 'Meet The Team'); ?></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h2><?php echo anchor('offices/testimonial/' . $franchise->id, 'Testimonials', array('class' => 'active')); ?></h2>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="height:340px;overflow:hidden">
                        <?php echo isset($lastestTes['content'])?$lastestTes['content']:'';?>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <p style="padding:0; line-height: 8px;">
                        <a href="<?php echo site_url('offices/testimonial/' . $franchise->id) ?>" class="view-all">View All</a>
                    </p>
                </td>
            </tr>
        </table>
        <div class="clearer"></div>
        <div class="officemenu">
            <table>
                <?php foreach ($suburbs as $key => $suburb) { ?>
                    <?php if ($key % 2 == 0) { ?>
                        <tr>
                            <td class="<?php echo ($key == 0) ? 'title' : '' ?>">
                                <?php echo ($key == 0) ? 'Our Suburbs' : '' ?>
                            </td>
                        <?php } ?>
                        <td class="suburb">
                            <?php echo strtolower($suburb->Locality) ?>
                        </td>
                        <?php if (($key % 2 == 1) || ($key == (count($suburbs) - 1))) { ?>
                        </tr>
                    <?php } ?>
                <?php } ?>

            </table>
        </div>
    </div>
    <div class="clearer"></div>

    <div id="emailoffice-dialog-modal" title="Email Office">
        <div>

            <form id="email_office">
                <div class="showError"></div>
                <table>
                    <tr>
                        <td style="padding-top:8px">
                            your name *
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailoffice_name" name="emailoffice_name" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            email address *
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailoffice_email"  name="emailoffice_email" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            mobile number
                        </td>
                        <td style="padding-top:8px">
                            <input id="emailoffice_mobile"  name="emailoffice_mobile" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            message
                        </td>
                        <td style="padding-top:8px">
                            <textarea id="emailoffice_message"  name="emailoffice_message" style="width:280px; height:96px; resize: none"></textarea>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script>
        $("#emailoffice-dialog-modal").dialog({
            autoOpen: false,
            width: 420,
            height: 346,
            modal: true,
            resizable: false,
            buttons: {
                Submit: function() {
                    $('.showSuccess').html('');
                    var e = $(this);
                    var form_data = $('#email_office').serialize();
                   
                    $('.error').removeClass('error');
                    //Begin the ajax call
                    $.ajax({
                        url: "<?php echo site_url('offices/office_email/' . $franchise->id) ?>",
                        type: "POST",
                        data: form_data,
                        dataType: "json",
                        cache: false,
                        success: function(json) {
                            var usermessage = json.usermessage;
                            var fielderrors = json.fielderrors;
                            if (usermessage[0] == 'error')
                            {
                                //Show the user the errors.
                                if(usermessage[2] == 1){
                                    e.dialog("close");
                                    $('#error-dialog-modal .showError').html(usermessage[1]);
                                    $('#error-dialog-modal').dialog('open');
                                }else{
                                    $('#email_office .showError').html(usermessage[1]);
                                    $(' #email_office.showError').show();
                                    $.each(fielderrors, function(id, value) {
                                        $('#'+id).addClass('error');
                                    });
                                }
                            } else {
                                $('#email_office')[0].reset();
                                $('#email_office .showError').html('');
                                e.dialog("close");
                                $('#success-dialog-modal .showSuccess').html(usermessage[1]);
                                $('#success-dialog-modal').dialog('open');
                            }
                        }
                    });
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
    </script>

    <div id="marketappraisal-dialog-modal" title="Free Market Appraisal">
        <div>
            <form id="marketappraisal_office">
                <div class="showError"></div>
                <table>
                    <tr>
                        <td colspan="2" style="padding-top:8px">
                            <h3 style="margin: 0 0 5px 0;">Your Details</h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            your name *
                        </td>
                        <td style="padding-top:8px">
                            <input id="marketappraisal_name" name="marketappraisal_name" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            email address *
                        </td>
                        <td style="padding-top:8px">
                            <input id="marketappraisal_email"  name="marketappraisal_email" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            mobile number
                        </td>
                        <td style="padding-top:8px">
                            <input id="marketappraisal_mobile"  name="marketappraisal_mobile" type="text" value="" style="width:256px"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top:8px">
                            <h3>Property Address</h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            address
                        </td>
                        <td style="padding-top:8px">
                            <textarea id="marketappraisal_address"  name="marketappraisal_address" style="width:280px; height:96px; resize: none"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top:8px">
                            <h3>Property Details</h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            appraisal type
                        </td>
                        <td style="padding-top:8px">
                            <input type="radio" name="marketappraisal_type" id="marketappraisal_type_forsale" value="sale"/><label for="marketappraisal_type_forsale" style="padding:0 4px">For Sale</label>
                            <input type="radio" name="marketappraisal_type" id="marketappraisal_type_forrent" value="rent"/><label for="marketappraisal_type_forrent" style="padding:0 4px">For Rent</label>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            property type
                        </td>
                        <td style="padding-top:8px">
                            <select name="marketappraisal_propertytype" class="last">
                                <option value=""></option>
                                <option value="acreagesemirural">Acreage/Semi Rural</option>
                                <option value="apartment">Apartment</option>
                                <option value="blockofunits">Block of Units</option>
                                <option value="colonial">Colonial</option>
                                <option value="development">Development</option>
                                <option value="duplex">Duplex</option>
                                <option value="federation">Federation</option>
                                <option value="homeandoffice">Home &amp; Office</option>
                                <option value="house">House</option>
                                <option value="houseandland">House &amp; Land Package</option>
                                <option value="investment">Investment</option>
                                <option value="project">Project</option>
                                <option value="queenslander">Queenslander</option>
                                <option value="townhouse">Townhouse</option>
                                <option value="unit">Unit</option>
                                <option value="vacantland">Vacant Land</option>
                                <option value="villa">Villa</option>
                                <option value="waterfrontbeach">Waterfront Beach</option>
                                <option value="waterfrontcanal">Waterfront Canal</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            age of property
                        </td>
                        <td style="padding-top:8px">
                            <input id="marketappraisal_propertyage"  name="marketappraisal_propertyage" type="text" value="" style="width:160px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            bedrooms
                        </td>
                        <td style="padding-top:8px">
                            <select name="marketappraisal_bedrooms" class="last" style="width:160px">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            bathrooms
                        </td>
                        <td style="padding-top:8px">
                            <select name="marketappraisal_bathrooms" class="last" style="width:160px">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top:8px">
                            land area
                        </td>
                        <td style="padding-top:8px">
                            <input id="marketappraisal_landarea"  name="marketappraisal_landarea" type="text" value="" style="width:160px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            additional info
                        </td>
                        <td style="padding-top:8px">
                            <textarea id="marketappraisal_additionalinfo"  name="marketappraisal_additionalinfo" style="width:280px; height:96px; resize: none"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top; padding-top:8px">
                            comments
                        </td>
                        <td style="padding-top:8px">
                            <textarea id="marketappraisal_comments"  name="marketappraisal_comments" style="width:280px; height:96px; resize: none"></textarea>
                        </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
    <script>
        $("#marketappraisal-dialog-modal").dialog({
            autoOpen: false,
            width: 420,
            height: 400,
            modal: true,
            resizable: false,
            buttons: {
                Submit: function() {
                    var e = $(this);
                    var form_data = $('#marketappraisal_office').serialize();
                    //Begin the ajax call
                    $.ajax({
                        url: "<?php echo site_url('offices/marketappraisal_email/' . $franchise->id) ?>",
                        type: "POST",
                        data: form_data,
                        dataType: "json",
                        cache: false,
                        success: function(json) {
                            var usermessage = json.usermessage;
                            var fielderrors = json.fielderrors;
                            if (usermessage[0] == 'error')
                            {
                                //Show the user the errors.
                                $('#marketappraisal_office .showError').html(usermessage[1]);
                                if(usermessage[2] == 1){
                                    e.dialog("close");
                                    $('#error-dialog-modal .showError').html(usermessage[1]);
                                    $('#error-dialog-modal').dialog('open');
                                }else{
                                    $(' #marketappraisal_office .showError').show();
                                    $.each(fielderrors, function(id, value) {
                                        $('#'+id).addClass('error');
                                    });
                                }
                                
                            } else {
                                $('#marketappraisal_office')[0].reset();
                                $('#marketappraisal_office .showError').html('');
                                e.dialog("close");
                                $('#success-dialog-modal .showSuccess').html(usermessage[1]);
                                $('#success-dialog-modal').dialog('open');
                            }
                        }
                    });
                    //                    $(this).dialog("close"); 
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
        
        function get_office(id,type,start,status){
            $.ajax({
                url: "<?php echo site_url('offices/get_office') ?>/"+type+'/'+start+'/<?php echo $franchise->id ?>',
                dataType: "HTML",
                cache: false,
                success: function(data) {
                    if(data){
                        $('#'+id).html(data);
                        $('#'+id).attr('rel',start);
                    }else if (start == 0){
                        $('#'+id).html('');
                    }
                        
                }
            });
        }
        
        function nextrecord(id,type){
            var start = $('#'+id).attr('rel');
            start = parseInt(start)+1;
            get_office(id,type,start);
            
        }
        function backrecord(id,type){
            var start = $('#'+id).attr('rel');
            start = parseInt(start);
            if(start > 0){
                start = start -1;
                get_office(id,type,start);
               
            }
        }
        
        function changeStatus(status){
            $('#ofice_status').attr('rel',0);
            $('#ofice_status').attr('status',status);
            $('.status').removeClass('active');
            $('#'+status).addClass('active')
            get_office('ofice_status',status,0);
        }
        
        function backoffice(){
            var start = $('#ofice_status').attr('rel');
            var type = $('#ofice_status').attr('status');
            start = parseInt(start);
            if(start > 0){
                start = start -1;
                get_office('ofice_status',type,start);
               
            }
        }
        
        function nextoffice(id,type){
            var start = $('#ofice_status').attr('rel');
            var type = $('#ofice_status').attr('status');
            start = parseInt(start)+1;
            get_office('ofice_status',type,start);
            
        }
        $(document).ready(function(){
            get_office('last_list','listings',0);
            get_office('ofice_status','sold',0);
        })
    </script>

</div>
